<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta author="tianjindong.cn 田金东">
<title>登录 - 听到微笑的博客- Thousands Find</title>
<link rel="stylesheet" type="text/css" href="/css/register-login.css">
<link rel="shortcut icon" href="/images/icon/favicon.ico">
<style type="text/css">
.error {
	color: red;
	padding-left: 10px;
}
</style>
</head>
<body>
	<div id="box"></div>
	<div class="cent-box">
		<div class="cent-box-header">
			<h1 class="main-title hide" onclick="window.location.href='${pageContext.request.contextPath}/index.html'" style="cursor: pointer;">听到微笑的博客</h1>
			<h2 class="sub-title">生活热爱分享 - Thousands Find</h2>
		</div>

		<div class="cont-main clearfix">
			<div class="index-tab">
				<div class="index-slide-nav">
					<a href="/login.html" class="active">登录</a> <a href="/register.html">注册</a>
					<div class="slide-bar"></div>
				</div>
			</div>

			<form id="loginForm" action="/account/login.action" method="post">
				<div class="login form">
					<div class="group">
						<c:if test="${error!=null and error=='unActivationError' }">
							<label id="verify-error" class="error" for="verify">该账户还未激活，请前往邮箱激活</label>
						</c:if>
						<c:if test="${error!=null and error=='AuthError' }">
							<label id="verify-error" class="error" for="verify">用户名或密码错误</label>
						</c:if>
						<c:if test="${error!=null and error=='uselessError' }">
							<label id="verify-error" class="error" for="verify">您的账户已被系统禁用</label>
						</c:if>
						<c:if test="${promptMessage!=null }">
							<label id="verify-error" class="error" for="verify">恭喜您注册成功，请前往邮箱激活账户！！</label>
						</c:if>
						<div class="group-ipt email">
							<input type="text" name="username" id="username" value="${username }" class="ipt" placeholder="用户名或邮箱地址" required>
						</div>
						<div class="group-ipt password">
							<input type="password" name="password" id="password" value="${password }" class="ipt" placeholder="输入您的登录密码" required>
						</div>
						<div class="group-ipt verify">
							<input type="text" name="checkCode" id="verify" class="ipt" placeholder="输入验证码" required> <img src="/validatecode.action" class="imgcode">
						</div>
						<c:if test="${error!=null and error=='checkCodeError' }">
							<label id="verify-error" class="error" for="verify">验证码错误</label>
						</c:if>
					</div>
				</div>
				<div class="button">
					<button type="submit" class="login-btn register-btn" id="button">登录</button>
				</div>
			</form>

			<div class="remember clearfix">
				<label class="remember-me"><span class="icon"><span class="zt"></span></span><input type="checkbox" name="remember-me" id="remember-me" class="remember-mecheck" checked>记住我</label> <label
					class="forgot-password"> <a href="#">忘记密码？</a>
				</label>
			</div>
		</div>
	</div>

	<jsp:include page="common/footer.jsp" />

	<script src='/js/login-particles.js' type="text/javascript"></script>
	<script src='/js/login-background.js' type="text/javascript"></script>
	<script src='/js/jquery-2.1.4.min.js' type="text/javascript"></script>
	<script src='/js/login-layer/layer.js' type="text/javascript"></script>
	<script src='/js/jquery.validate.min.js' type="text/javascript"></script>
	<script src="/js/console.js"></script>

	<script>
		$(function() {
			$("#loginForm").validate({
				rules : {
					username : {
						"required" : true,
					},
					password : {
						"required" : true,
					},
					checkCode : {
						"required" : true,
					}
				},
				messages : {
					username : {
						"required" : "用户名不能为空",
					},
					password : {
						"required" : "密码不能为空",
					},
					checkCode : {
						"required" : "验证码不能为空",
					}
				}
			});
		});
	
		$('.imgcode').hover(function() {
			layer.tips("看不清？点击更换", '.verify', {
				time : 6000,
				tips : [ 2, "#3c3c3c" ]
			})
		}, function() {
			layer.closeAll('tips');
		}).click(function() {
			$(this).attr('src', '/validatecode.action?id=' + Math.random());
		});
		$("#remember-me").click(function() {
			var n = document.getElementById("remember-me").checked;
			if (n) {
				$(".zt").show();
			} else {
				$(".zt").hide();
			}
		});
	</script>
</body>
</html>